<template>
	<view class="login-page">
		<view class="base-login-content">
			<view class="login-header">
				<image
					class="icon-logo"
					src="@/static/images/icon_login_logo.png"
				></image>
			</view>
			<view class="login-body">
				<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
				<view class="login-field">
					<input
						:value="inputs.account"
						type="tel"
						maxlength="11"
						data-key="account"
						placeholder="请输入手机号码"
						placeholder-style="font-size: 28rpx;color: #cccccc;"
						class="custom-field"
						@input="inputChange"
					/>
				</view>
				<view class="login-field">
					<input
						:value="inputs.verifyCode"
						type="tel"
						maxlength="6"
						data-key="verifyCode"
						placeholder="请输入短信验证码"
						placeholder-style="font-size: 28rpx;color: #cccccc;"
						class="custom-field"
						@input="inputChange"
					/>
					<view
						class="countdown-content"
						:class="{
							countdown: isCountdown || !isVerifyMobile
						}"
					>
						<template v-if="isCountdown">
							<view class="countdown-count">{{ count }}s</view>
						</template>
						<template v-else>
							<view class="code-button" @click="sendVerifyCode">获取验证码</view>
						</template>
					</view>
				</view>
				<view class="send-code-content">
					<view v-if="sending">发送短信中...</view>
				</view>
				<!-- #endif -->
				<view class="login-button">
					<uv-button
						type="primary"
						color="#ffda05"
						:disabled="!allowSubmit || loging"
						loadingText="登录中"
						loadingSize="18"
						:customTextStyle="{
							fontSize: '32rpx',
						}"
						:customStyle="{
							height: '88rpx',
							fontWeight: 650,
							fontSize: '32rpx',
							color: '#2c2c2c',
							borderRadius: '8rpx'
						}"
						@click="login"
					>
						<text>{{ loging ? '登录中' : '登录'}}</text>
					</uv-button>
				</view>
				<view class="login-tips">
					<image class="icon-tip" src="@/static/images/icon_order_tip.png"></image>
					<text>若未注册回收宝账号，将自动注册回收宝账号</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { apiPromise } from '@/helper/uniPromise'

const COUNT = 60

export default {
	computed: {
		isCountdown () {
			return this.count < 60
		},
		isVerifyMobile () {
			return /^[1][0-9]{10}$/.test(this.inputs.account)
		},
		allowSubmit () {
			// #ifndef MP-WEIXIN || MP-ALIPAY
			return this.isVerifyMobile && !this.sending && this.inputs.verifyCode > 0
			// #endif
			// #ifdef MP-WEIXIN || MP-ALIPAY
			return true
			// #endif
		}
	},
	data () {
		return {
			redirectUri: '',
			inputs: {
				account: '',
				verifyCode: ''
			},
			imgCode: '',
			count: COUNT,
			sending: false,
			loging: false,
			timer: null
		}
	},
	methods: {
		/**
		 * 登录
		 */
		async login () {
			if (this.loging) return
			this.loging = true
			const params = {}
			// #ifndef MP-WEIXIN || MP-ALIPAY
			params.tel = this.inputs.account,
			params.code = this.inputs.verifyCode
			// #endif
			const [loginRes] = await this.$store.dispatch('user/login', params)
			this.loging = false
			if (loginRes._errCode === '0') {
				const url = decodeURIComponent(this.redirectUri) || '/pages/index/index'
				const [uri] = url.split('?')
				if (['/pages/index/index', '/pages/account/index'].includes(uri)) {
					uni.switchTab({ url })
				} else {
					uni.redirectTo({ url })
				}
			} else {
				uni.showToast({
					title: loginRes._errStr || '登录失败',
					icon: 'none'
				})
			}
		},
		inputChange (e) {
			this.inputs[e.currentTarget.dataset.key] = e.detail.value
		},
		/**
		 * 发送验证码
		 */
		async sendVerifyCode () {
		  if (!this.isVerifyMobile) return
		  this.sending = true
			const [res] = await this.$apis.getCode({
				tel: this.inputs.account,
				imgCode: this.imgCode
			})
			this.sending = false
			if (res._errCode === '0') {
				this.startCountdown()
			} else {
				uni.showToast({
					title: res._errStr || '发送验证码失败',
					icon: 'none'
				})
			}
		},
		/**
		 * 倒计时
		 */
		startCountdown () {
		  this.count--
		  clearInterval(this.timer)
		  this.timer = setInterval(() => {
		    if (this.count <= 0) {
		      this.count = COUNT
		      return clearInterval(this.timer)
		    }
		    this.count--
		  }, 1000)
		}
	},
	onUnload () {
		clearInterval(this.timer)
	},
	onLoad (options) {
		this.redirectUri = options.redirectUri || ''
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
